<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue';
import {useTable} from "~/composables/table.ts";
import {useForm} from "~/composables/form.ts";
import { QuestionCircleOutlined } from '@ant-design/icons-vue';


interface TsScripts{
  id: string
  name: string
  bid: string
  fileName: string
  appid: string
  downLink: string
  devKey: string
  status: boolean
  remark: string
}
const apiPrefix = "tsScripts"
const columns = shallowRef([
  {
    title: '应用名',
    dataIndex: 'name',
  },
  {
    title: '文件名',
    dataIndex: 'fileName'
  },
  {
    title: '包名',
    dataIndex: 'bid',
  },
  {
    title: 'appid',
    dataIndex: 'appid',
  },
  {
    title: 'devKey',
    dataIndex: 'devKey',
  },

  {
    title: '备注',
    dataIndex: 'remark',
  },
  {
    title: '操作',
    dataIndex: 'action'
  },
])

const { state, query } = useTable({
  apiPrefix,
  searchColumn:[],
  queryParams:{status:true},
  afterQuery: (res) => {
    console.log(res)
    return res
  },
  _pagination:{
    column: '',
    pageSize: 999,
    pageSizeOptions: ['999']
  },
})

const {formState,handleOk,handleCancel,openForm,handleEdit,handleDelete,formRef} = useForm({
  apiPrefix,
  query,
})
function handleAdd(){
  openForm(
      {status:true,fileName: '模板'} as TsScripts
  )
}
// const fileList = ref([]);
//
// function upload(formData){
//   formData.fileName = formData.name
//   const file = (fileList.value[0] as { originFileObj?: File })?.originFileObj;
//
//   if (!file) {
//     console.error('未选择文件');
//     return;
//   }
//
//   const form = new FormData();
//   form.set("file", file);
//
//   scriptUpload(form, formData.name)
//     .then(response => {
//       fileList.value = []
//       message.success(response.msg);
//       // 可以在此处添加上传成功后的处理逻辑
//     })
//     .catch(error => {
//       fileList.value = []
//       message.error('上传失败:', error);
//       // 可以在此处添加上传失败后的提示逻辑
//     });
// }
const tagsData = reactive(['看启用', '看禁用']);
const selectTags = reactive([true, false]);
const handleChange = () => {
  if(selectTags[0] && !selectTags[1]){
    state.queryParams = {status:true}
    query()
  }
  if (selectTags[1] && !selectTags[0]){
    state.queryParams = {status:false}
    query()
  }
  if(selectTags[0] && selectTags[1]){
    state.queryParams = {}
    query()
  }
};
</script>

<template>
  <page-container>
    <a-card>
      <template #extra>
        <a-checkable-tag
            v-for="(tag, index) in tagsData"
            :key="tag"
            v-model:checked="selectTags[index]"
            @change="handleChange"
        >
          {{ tag }}
        </a-checkable-tag>
        <a-space size="large">
          <a-button type="primary" @click="handleAdd">
            <template #icon>
              <PlusOutlined />
            </template>
            新增
          </a-button>
        </a-space>
      </template>
      <a-table
          row-key="id" :row-selection="state.rowSelections" :loading="state.loading" :columns="columns"
          :data-source="state.dataSource" :pagination="state.pagination"
      >
        <template #bodyCell="scope">
          <template v-if="scope?.column?.dataIndex === 'action'">
            <div flex gap-2>
              <a-button type="link" @click="handleEdit(scope?.record as TsScripts)">
                编辑
              </a-button>
              <a-popconfirm
                  title="确定删除该条数据？" ok-text="确定" cancel-text="取消"
                  @confirm="handleDelete(scope?.record as TsScripts)"
              >
                <a-button type="link">
                  删除
                </a-button>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:open="formState.formVisible" :title="formState.isUpdate?'编辑':'新增'" @ok="handleOk" @cancel="handleCancel">
      <a-form ref="formRef" :model="formState.formData" class="w-full" :label-col="{ style: { width: '100px' } }" :wrapper-col="{ span: 24 }">
        <a-form-item name="name" label="应用名" :rules="[{ required: true, message: '请输入应用名' }]">
          <a-input v-model:value="formState.formData.name" :maxlength="50" placeholder="请输入应用名" />
        </a-form-item>
        <a-form-item name="fileName" label="文件名" :rules="[{ required: true, message: '请输入文件名' }]">
          <a-input v-model:value="formState.formData.fileName" :maxlength="50" placeholder="请输入文件名" />
        </a-form-item>
        <a-form-item name="bid" label="包名" :rules="[{ required: true, message: '请输入bid' }]">
          <a-input v-model:value="formState.formData.bid" :maxlength="50" placeholder="请输入bid com.xxxxx" />
        </a-form-item>
        <a-form-item name="appid" label="appid" :rules="[{ required: true, message: '请输入appid' }]">
          <a-input v-model:value="formState.formData.appid" :maxlength="50" placeholder="请输入appid idxxxxx" />
        </a-form-item>
        <a-form-item name="downLink" label="下载地址">
          <a-input v-model:value="formState.formData.downLink" :maxlength="50" placeholder="请输入下载地址" >
            <template #prefix>
              <a-tooltip>
                <template #title>不填默认items前缀加appid</template>
                <QuestionCircleOutlined />
              </a-tooltip>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item name="devKey" label="devKey" >
          <a-input v-model:value="formState.formData.devKey" :maxlength="50" placeholder="请输入devKey" />
        </a-form-item>
        <a-form-item name="remark" label="备注">
          <a-input v-model:value="formState.formData.remark" :maxlength="50" placeholder="请输入备注" />
        </a-form-item>
        <a-form-item name="是否启用" label="是否启用" >
          <a-switch v-model:checked="formState.formData.status" />
        </a-form-item>
<!--        <a-upload-dragger-->
<!--            v-if="formState.formData.id"-->
<!--            v-model:fileList="fileList"-->
<!--            name="file"-->
<!--            :customRequest="()=>{upload(formState.formData)}"-->
<!--            :multiple="false"-->
<!--        >-->
<!--          <p class="ant-upload-drag-icon">-->
<!--            <inbox-outlined></inbox-outlined>-->
<!--          </p>-->
<!--          <p class="ant-upload-text">拖入脚本文件(上传后会根据上面的脚本文件名改名并覆盖)</p>-->
<!--        </a-upload-dragger>-->
      </a-form>
    </a-modal>
  </page-container>
</template>

<style lang="less" scoped>

</style>
